<script setup lang="ts">
import { computed, ref } from 'vue'
import { useSystemStore } from '../../stores/system'
import { useTodosStore } from '../../stores/todos'
import { useSettingStore } from '../../stores/setting'
import TopBackground from '../../components/TopBackground.vue'
import CustLabel from '../../components/CustLabel.vue'
import CustDialog from '../../components/CustDialog.vue'

const systemStore = useSystemStore()
const todosStore = useTodosStore()
const settingStore = useSettingStore()

const customConfig = computed({
	get() {
		return settingStore.customConfig
	},
	set(value) {
		settingStore.customConfig = value
	}
})

// 是否显示添加标签对话框
const showAddLabelDialog = ref(false)

const newLabelName = ref('')

// 打开添加标签对话框
const handleAddLabel = () => {
	newLabelName.value = ''
	showAddLabelDialog.value = !showAddLabelDialog.value
}

// 确认添加新标签
const confirmAddLabel = () => {
  const res = settingStore.addLabel(newLabelName.value)
	if (res) {
		newLabelName.value = ''
		showAddLabelDialog.value = false
	}
}

// 到期自动完成切换事件
const handleAutoCompleteChange = (e: any) => {
  customConfig.value.autoComplete = e.detail.value

	if (customConfig.value.autoComplete) {
		settingStore.startTodoStatusHandler()
	}
}

// 删除标签
const removeLabel = (labelName: string) => {
  settingStore.deleteLabel(labelName)
}

// 删除时间选项
const deleteTimeOptions = ref([
  { value: 1 * 60, label: '1分钟' },
  { value: 10 * 60, label: '10分钟' },
  { value: 60 * 60, label: '1小时' },
  { value: 1440 * 60, label: '1天' },
  { value: 4320 * 60, label: '3天' },
  { value: 10080 * 60, label: '1周' },
  { value: 43200 * 60, label: '1个月' },
	{ value: -1, label: '不自动删除' },
])

// 删除时间选择器改变事件
const onDeleteTimeChange = (e: any) => {
  customConfig.value.deleteDuringTime = deleteTimeOptions.value[e.detail.value].value
}
</script>

<template>
	<view class="setting-view" :style="systemStore.warrperStyle">
		<top-background />

		<view class="title" :style="{ height: systemStore.menuButtonHeight + 'px' }">
			设置
		</view>

		<!-- 标签管理 -->
		<view class="section-layer">
			<view class="section-top">
				<view class="section-title">
					标签管理
				</view>
				<view class="add-label-btn" @click="handleAddLabel">
					添加标签
				</view>
			</view>

			<view class="section-content label-list">
				<!-- 所有标签列表 -->
				<view class="all-labels-list" v-if="settingStore.allLabels.length">
					<CustLabel
						v-for="label in settingStore.allLabels"
						:key="label.name"
						:label="label"
						type="deleteable"
						@delete="removeLabel(label.name)"
					/>
				</view>
				<!-- 暂无标签提示 -->
				<view class="no-labels-msg" v-else @click="handleAddLabel">
					暂无标签，可添加标签
				</view>
			</view>
		</view>

		<!-- 回收管理 -->
		<view class="section-layer">
			<view class="section-top">
				<view class="section-title">
					回收管理
				</view>
			</view>

			<view class="section-content auto-complete">
				<view class="text">到期自动完成</view>
				<view class="auto-complete-switch">
					<switch :checked="customConfig.autoComplete" @change="handleAutoCompleteChange" color="#339ca8" style="transform:scale(0.7)" />
				</view>
			</view>

			<view class="section-content delete-duringtime">
				<view class="text">完成后多长时间后删除</view>
				<view class="delete-duringtime-picker">
					<picker
						@change="onDeleteTimeChange"
						:value="deleteTimeOptions.findIndex(item => item.value === customConfig.deleteDuringTime)"
						:range="deleteTimeOptions"
						range-key="label"
					>
						<view class="picker-value">
							{{ deleteTimeOptions.find(item => item.value === customConfig.deleteDuringTime)?.label }}
						</view>
					</picker>
				</view>
			</view>
		</view>

		<CustDialog
		  v-model="showAddLabelDialog"
			title="添加标签"
			:show-cancel="false"
			class="add-label-dialog"
		>
			<template #default>
				<view class="add-label-input">
					<input
						v-model="newLabelName"
						class="uni-input"
						placeholder="请输入标签名称"
						placeholder-style="color: #999; font-weight: nomal;"
					/>
				</view>
			</template>
			<template #footer>
				<view class="confirm-button" @click="confirmAddLabel">
					确定
				</view>
			</template>
		</CustDialog>
	</view>
</template>

<style scoped lang="scss">
.setting-view {
  background-color: $uni-background;

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: $uni-base-color;
		margin: 0 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.section-layer {
		padding: 20rpx 30rpx;

		.section-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.add-label-btn {
				padding: 15rpx 25rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				margin: 0 10rpx;
				background-color: #339ca8;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.section-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: $uni-white;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		.delete-duringtime {
			padding: 25rpx 20rpx;

			.delete-duringtime-picker {
				.picker-value {
					padding: 10rpx 20rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					color: #333;
					font-size: 28rpx;
				}
			}
		}
	}

	.label-list {
		.all-labels-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: 20rpx;
			border-radius: 20rpx;
		}

		.no-labels-msg {
			color: $uni-base-color;
		}
	}

	.add-label-dialog {
		.add-label-input {
			margin: 40rpx 0;
			padding: 20rpx 30rpx;
			background-color: #f5f5f5;
			border: 1rpx solid #ddd;
			border-radius: 10rpx;
		}

		.confirm-button {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
			background-color: $uni-color-main;
			color: #fff;
			border-radius: 20rpx;
		}
	}
}
</style>
